<template>
  <div class="app-container">
    <el-dialog :title="prop.title" :visible.sync="prop.open" width="680px" :close-on-click-modal="false" :show-close="false" destroy-on-close append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型名称" prop="postName">
              <el-input v-model="form.postName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="适用职级" prop="postGrades">
              <el-select v-model="form.postGrades" style="width: 100%;" :multiple="true">
                <el-option
                  v-for="item in gradeDatas"
                  :key="item.gradeId"
                  :label="item.gradeName"
                  :value="item.gradeId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="saveLoading">确 定</el-button>
        <el-button @click="cancel({isSaveData:false})">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {add,edit,getDetail,checkNameIsUnique} from '@/api/organization/post/post.js'
import {getAllGradeSelectItems} from '@/api/organization/grade/grade.js'
export default {
  name: "PostTypeEdit",
  dicts: [],
  components: { },
  props:{
    open:{
      type:Boolean,
      default:false
    },
    prop:{
      type:Object,
      default:function(){
        return {
          open:false,
          title:'新增',
          parentId:null,
          editId:null,
          isRoot:false
        }
      }
    }
  },
  data() {
    var nameValidator = (rule, value, callback) => {
      if(value!==null&&value.trim()!==""){
        checkNameIsUnique({postName:value,postId:this.form.postId}).then(res =>{
          let isUnique = res.data
          if (isUnique) {
            return callback()
          }else{
            return callback(new Error('岗位类型名称不能重复'));
          }
        })
      }else{
         return callback(new Error('岗位类型名称不能为空'));
      }
    };
    return {
      saveLoading:false,
      isEdit:false,
      gradeDatas:[],
      form: {
        postName:null,
        postType:'0',
        postGrades:[],
        isEnable:'1',
        postParentId:'0',
      },
      rules: {
        postName: [
          { required: true, validator:nameValidator, trigger: "blur" }
        ],
        postGrades: [
          { required: true, message: "适应职级不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getGradeDatas(){
      getAllGradeSelectItems().then(res =>{
        this.gradeDatas = res.data
      }).catch(err =>{
        console.log('查询职级下拉数据失败，原因：',err)
      })
    },
    getDetail(){
      getDetail({postId:this.prop.editId}).then(res =>{
        let {postGrades,...post} = res.data
        post.postGrades = postGrades.map(pg =>pg.gradeId)
        this.form = post
        console.log(this.form)
        console.log(this.form)
      }).catch(err =>{
        console.log('查询岗位分类详情数据失败，原因：',err)
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.saveLoading = true
      this.$refs["form"].validate(valid => {
        if (valid) {
          let formData = this.setFormData()
          if (this.isEdit) {
            edit(formData).then(response => {
              this.saveLoading = false
              this.$modal.msgSuccess("修改成功");
              this.cancel({isSaveData:true})
            }).catch(err =>{
              console.log('保存失败，原因：',err)
              this.saveLoading = false
              this.cancel({isSaveData:false})
            });
          } else {
            add(formData).then(response => {
              this.saveLoading = false
              this.$modal.msgSuccess("新增成功");
              this.cancel({isSaveData:true})
            }).catch(err =>{
              console.log('保存失败，原因：',err)
              this.saveLoading = false
              this.cancel({isSaveData:false})
            });
          }
        }else{
          this.saveLoading = false
        }
      });
    },
    setFormData(){
      let {postGrades,...post} = this.form
      let pgs = []
      if(postGrades!==null && postGrades.length>0){
        pgs = postGrades.map(item =>{
          return {gradeId:item}
        })
      }
      return {post:post,postGrades:pgs}
    },
    // 表单重置
    reset() {
      this.form = {
        postName:null,
        postType:'0',
        grades:[],
        isEnable:'1',
        postParentId:'0',
      };
      this.isEdit = false
    },
    // 取消按钮
    cancel(closeParam) {
      this.reset()
      this.$emit('close',closeParam)
    },
  },
  mounted() {
    this.getGradeDatas()
    if(this.prop.editId!==null){
      this.isEdit = true
      this.getDetail()
    }
  },
};
</script>
<style scoped>

</style>
